<!--
 * @Descripttion:滁州数据大屏项目展示
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-09-05 15:05:40
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-04-08 16:15:54
-->
<template>
  <div class="content">
    <el-row :gutter="10" class="screen">
      <el-col :span="7" class="elcol">
        <div class="left drawbg" style="margin-bottom: 10px">
          <div class="title">项目分类</div>
          <div id="projectDisplayhighrate" class="chartbg"></div>
        </div>
        <div class="left drawbg">
          <p class="title">保证金缴纳</p>
          <div class="fr realNameBox">
            <el-date-picker
              v-model="depositPaymentSelected"
              type="month"
              placeholder="选择年月"
              @change="realNameChange"
              format="yyyy-MM"
              value-format="yyyy-MM"
            ></el-date-picker>
          </div>
          <div id="projectDisplaycomplaint" class="chartbg"></div>
        </div>
      </el-col>
      <el-col :span="10" class="elcol">
        <div class="left drawbg middleTop" style="margin-bottom: 10px">
          <div class="title">项目产出</div>
          <div class="projectOutputTable">
            <el-table
              :data="tableData"
              stripe
              style="width: 100%"
              height="100%"
              :header-cell-style="{
                background: '#245073',
                color: '#8AFFEA',
                fontSize: '12px',
                fontWeight: 'bold',
              }"
              :cell-style="{ background: '#1F4566', color: '#ccc' }"
            >
              <el-table-column
                type="index"
                width="80px"
                label="序号"
                align="center"
              ></el-table-column>
              <el-table-column prop="areaName" label="地区" align="center">
                <template slot-scope="scope">
                  <p class="dateColor">{{ scope.row.areaName || '0' }}</p>
                </template>
              </el-table-column>
              <el-table-column
                prop="salaryAmount"
                label="累计发放工资（万）"
                align="center"
              >
                <template slot-scope="scope">
                  <p>{{ scope.row.salaryAmount || '0' }}</p>
                </template>
              </el-table-column>
              <el-table-column
                prop="depositAmount"
                label="累计缴存（万）"
                align="center"
              >
                <template slot-scope="scope">
                  <p>{{ scope.row.depositAmount || '0' }}</p>
                </template>
              </el-table-column>
              <el-table-column
                prop="salaryPeople"
                label="累计发放人数（个）"
                align="center"
              >
                <template slot-scope="scope">
                  <p>{{ scope.row.salaryPeople || '0' }}</p>
                </template>
              </el-table-column>
              <el-table-column
                prop="accountNum"
                label="累计开设专户（个）"
                align="center"
              >
                <template slot-scope="scope">
                  <p>{{ scope.row.accountNum || '0' }}</p>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="left drawbg middleBottom">
          <div class="title">工资发放趋势</div>
          <div class="fr realNameBox">
            <el-date-picker
              v-model="yearSelected"
              type="year"
              placeholder="选择年"
              @change="payrollTrendsChange"
              format="yyyy"
              value-format="yyyy"
            ></el-date-picker>
          </div>
          <div id="projectDisplaymarginData" class="chartbg"></div>
        </div>
      </el-col>
      <el-col :span="7" class="elcol">
        <div class="left drawbg" style="margin-bottom: 10px">
          <div class="title">预警</div>
          <div id="projectDisplaywarningCenter" class="chartbg"></div>
        </div>
        <div class="left drawbg">
          <div class="title">专户比例</div>
          <div id="integrityManagement" class="chartbg"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  drawFemaleRatio,
  drawOperatingRatio,
  drawLineArea,
  drawTipCenter,
  drawIntegrityManagement,
} from './projectDisplay/projectDisplay'
export default {
  name: 'projectDisplay',
  data() {
    return {
      yearSelected: '2020',
      depositPaymentSelected: '2020-09',
      tableData: [],
      proshowprosortIndex: [],
      showdepositIndex: [],
      proshowalertIndex: [],
      projectIndex: [],
    }
  },
  mounted() {
    this.currentTime()
    this.getInvestmenttype()
    this.getHomepagedeposit()
    this.getProjectOutputDate()
    this.getWarningCenter()
    this.getMarginData()
    this.getIntegrityManagement()
  },
  methods: {
    /**
     * @description:项目分类
     */
    getInvestmenttype() {
      const vm = this
      let sexChart = echarts.init(
        document.getElementById('projectDisplayhighrate')
      )
      sexChart.on('click', function (params) {
        vm.$router.push({
          path: '/home/project/projectList',
          name: 'projectList',
          query: {
            areaId: vm.proshowprosortIndex[params.dataIndex],
            sign: 'chuzhouBigScreen',
          },
        })
        vm.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/project/projectList',
          newUrl: vm.$router.currentRoute.fullPath,
        })
      })
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: 'api-s/cs/commandcenter/base/proshowprosort',
        data: {},
      })
        .then((res) => {
          sexChart.hideLoading()
          vm.proshowprosortIndex = res.data.result.idArray
          let nameArrayLength = res.data.result.nameArray.length
          let arr = []
          for (let i = 0; i < nameArrayLength; i++) {
            arr.push(0)
          }
          if (!res.data.result.sixthNumArray) {
            res.data.result.sixthNumArray = arr
          }
          drawFemaleRatio('projectDisplayhighrate', res.data.result)
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取项目分类数据失败",
          //   type: "error",
          // });
        })
    },
    /**
     * @description:保证金缴纳
     */
    getHomepagedeposit() {
      const vm = this
      let sexChart = echarts.init(
        document.getElementById('projectDisplaycomplaint')
      )
      sexChart.on('click', function (params) {
        vm.$router.push({
          path: '/home/cashDeposit/cashDepositListJC',
          query: {
            alertId: vm.showdepositIndex[params.dataIndex],
          },
        })
        vm.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/cashDeposit/cashDepositListJC',
          newUrl: vm.$router.currentRoute.fullPath,
        })
      })
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: 'api-s/cs/commandcenter/base/proshowdeposit',
        data: {
          yearMonth: vm.depositPaymentSelected,
        },
      })
        .then((res) => {
          sexChart.hideLoading()
          vm.showdepositIndex = res.data.result.idArray
          drawOperatingRatio('projectDisplaycomplaint', 2, res.data.result)
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取保证金数据失败",
          //   type: "error",
          // });
        })
    },
    /**
     * @description:预警
     */
    getWarningCenter() {
      const vm = this
      let sexChart = echarts.init(
        document.getElementById('projectDisplaywarningCenter')
      )
      sexChart.on('click', function (params) {
        vm.$router.push({
          path: '/home/project/constructAlertProjectList',
          name: 'constructAlertProjectList',
          query: {
            areaId: vm.proshowalertIndex[params.dataIndex],
          },
        })
        vm.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/project/constructAlertProjectList',
          newUrl: vm.$router.currentRoute.fullPath,
        })
      })
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: 'api-s/cs/commandcenter/base/proshowalert',
        data: {},
      })
        .then((res) => {
          sexChart.hideLoading()
          vm.proshowalertIndex = res.data.result.idArray
          drawTipCenter('projectDisplaywarningCenter', res.data.result)
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取预警数据失败",
          //   type: "error",
          // });
        })
    },
    /**
     * @description:项目产出
     */
    getProjectOutputDate() {
      const vm = this
      vm.axios({
        method: 'post',
        url: 'api-s/cs/commandcenter/base/proshowproout',
        data: {},
      })
        .then((res) => {
          this.tableData = res.data.result.dataList
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取项目产出数据失败",
          //   type: "error",
          // });
        })
    },
    /**
     * @description:工资发放趋势
     */
    getMarginData() {
      const vm = this
      let sexChart = echarts.init(
        document.getElementById('projectDisplaymarginData')
      )
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: '/api-s/cs/commandcenter/base/proshowsalary',
        data: {
          year: vm.yearSelected,
        },
      })
        .then((res) => {
          sexChart.hideLoading()
          drawLineArea('projectDisplaymarginData', 2, res.data.result)
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取工资发放趋势数据失败",
          //   type: "error",
          // });
        })
    },
    /**
     * @description:专户比例
     */
    getIntegrityManagement() {
      const vm = this
      let sexChart = echarts.init(
        document.getElementById('integrityManagement')
      )
      sexChart.on('click', function (params) {
        vm.$router.push({
          path: '/home/dynamicService/projectDetailsReport',
          name: 'projectDetailsReport',
          query: {
            areaId: vm.projectIndex[params.dataIndex],
          },
        })
        vm.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/dynamicService/projectDetailsReport',
          newUrl: vm.$router.currentRoute.fullPath,
        })
      })
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: 'api-s/cs/commandcenter/base/proshowaccount',
        data: {},
      })
        .then((res) => {
          sexChart.hideLoading()
          vm.projectIndex = res.data.result.idArray
          let nameArrayLength = res.data.result.nameArray.length
          let arr = []
          for (let i = 0; i < nameArrayLength; i++) {
            arr.push(0)
          }
          if (!res.data.result.sixthNumArray) {
            res.data.result.sixthNumArray = arr
          }
          drawIntegrityManagement('integrityManagement', res.data.result)
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取项目分类数据失败",
          //   type: "error",
          // });
        })
    },
    /**
     * @description:获取系统当前时间
     */
    currentTime() {
      const vm = this
      var nowDate = new Date()
      this.yearSelected = nowDate.getFullYear() + ''
      this.depositPaymentSelected = this.format(nowDate)
    },
    /**
     * @description:保证金缴纳
     */
    realNameChange(value) {
      const vm = this
      this.yearMonth = value
      this.getHomepagedeposit()
    },
    /**
     * @description:工资发放趋势
     */
    payrollTrendsChange(value) {
      const vm = this
      vm.yearSelected = value
      vm.getMarginData()
    },
  },
}
</script>

<style scoped lang="less">
.content {
  width: 100%;
  height: calc(100% - 46px);
  background: #1e4260;
  .screen {
    height: 100%;
    padding: 10px;
    .elcol {
      height: 100%;
      .drawbg {
        height: 100%;
        background: rgba(29, 65, 96, 0.5);
        position: relative;
        .title {
          height: 22px;
          position: absolute;
          top: 10px;
          left: 10px;
          font-size: 16px;
          line-height: 22px;
          color: #ffffff;
          letter-spacing: 0;
          font-weight: bold;
          &::before {
            content: '';
            background: #fed857;
            display: inline-block;
            width: 5px;
            height: 16px;
            margin-right: 10px;
            position: relative;
            top: 2px;
          }

          .desc {
            font-size: 14px;
            color: #7a8b9b;
          }
        }
        .titleProjectOutput {
          height: 22px;
          font-size: 16px;
          margin-top: -10px;
          margin-bottom: 10px;
          line-height: 22px;
          color: #ffffff;
          letter-spacing: 0;
          font-weight: bold;
          &::before {
            content: '';
            background: #fed857;
            display: inline-block;
            width: 5px;
            height: 16px;
            margin-right: 10px;
            position: relative;
            top: 2px;
          }
          .desc {
            font-size: 14px;
            color: #7a8b9b;
          }
        }
        .info {
          width: 100%;
          font-size: 14px;
          color: #7193b2;
          text-align: center;
          position: absolute;
          top: 50px;
          left: 0;
          .dataNum {
            font-size: 20px;
            font-weight: bold;
            color: #53ffac;
            margin-bottom: 5px;
          }
        }
        .chartbg {
          height: 100%;
          overflow: hidden;
          .drawSelf {
            margin-top: 40px;
            height: calc(100% - 40px);
            padding: 10px;
            .drawSelfLi {
              height: calc(100% / 5);
              padding: 10px 0;
              border-top: 1px solid #1c405b;
              position: relative;
              &:last-child {
                border-bottom: 1px solid #1c405b;
              }
              .inlineB {
                height: 100%;
              }
              .imageBox {
                width: 34px;
                height: 36px;
                img {
                  width: 34px;
                  height: 36px;
                  position: absolute;
                  right: 5px;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                }
              }
              .progress {
                width: calc(100% - 50px);
                height: 100%;
                line-height: 100%;
                .autoProgress {
                  // float: left;
                  vertical-align: top;
                  display: inline-block;
                  margin-top: 22px;

                  width: 100%;
                  height: 10px;
                  background-image: linear-gradient(
                    270deg,
                    #fed857 2%,
                    rgba(83, 255, 172, 0) 100%
                  );
                  border-radius: 5px;
                  border-radius: 5px;
                }
                .titleInfo {
                  // float: left;
                  display: inline-block;
                  margin-top: 10px;
                  p {
                    height: 50%;
                    text-align: center;
                  }
                  .name {
                    font-size: 12px;
                    color: #ffffff;
                  }
                  .value {
                    font-size: 14px;
                    color: #fed857;
                  }
                }
              }
            }
          }
        }
        #complaint {
          padding: 20px 0px 0px 0px;
        }
      }
      .left {
        width: 100%;
        height: calc((100% - 10px) / 2);
        background-color: #284a68;
      }
      .right {
        width: 100%;
        height: 100%;
        background-color: #284a68;
      }
      .middleTop {
        padding: 20px 0 0 10px;
        height: calc(65% - 5px);
        margin-bottom: 10px;
        background-color: #284a68;
        .projectOutputTable {
          width: 100%;
          height: calc(100% - 5px);
          padding: 20px 10px 0px 5px;
        }
      }
      .middleBottom {
        padding: 20px 0 0 10px;
        height: calc(35% - 5px);
        background-color: #284a68;
      }
      .realNameBox {
        z-index: 2005;
        margin-top: 9px;
        /deep/.searchInputWidth .el-input__inner,
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner,
        .searchInputWidth .el-input--suffix .el-input__inner {
          width: 110px;
          height: 30px;
          line-height: 20px;
          z-index: 9999;
          position: absolute;
          right: 5px;
          top: 5px;
          background-color: #1d4160;
        }
        /deep/.el-input__icon {
          line-height: 37px;
        }
        /deep/.el-input__inner {
          height: 30px;
          background-color: #1d4160;
          color: #fff;
          border: 0px;
        }
        /deep/.el-picker-panel__body {
          background-color: #1d4160 !important;
        }
      }
    }
  }
}
/deep/ .el-table {
  background-color: #284a68;
}

/deep/ .el-table__row > td {
  border: none;
}
/deep/ .el-table {
  .delete-row {
    color: #d8d8d8;
  }
  border: 0;
  th,
  tr,
  td {
    border: 0;
    background-color: #fff;
  }
  &::before {
    height: 0px;
  }
  &::after {
    width: 0;
  }

  .el-table__fixed:before {
    height: 0;
  }
}
.dateColor {
  color: #fed857;
}

/deep/.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 54px;
  .is-leaf {
    border-bottom: 0px;
  }
}
/deep/.el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 50px;
}
.projectOutput {
  font-weight: bolder;
  font-size: 18px;
  padding-bottom: 10px;
}
#projectDisplaycomplaint {
  padding: 15px 0px 0px 0px;
}
.projectOutputTable /deep/ .el-table td > .cell {
  color: rgb(204, 204, 204);
}
.projectOutputTable /deep/ .el-table th > .cell {
  color: rgb(138, 255, 234);
}
.projectOutputTable /deep/ input.el-input__inner {
  width: 113px;
}
</style>
